<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<a href="#/app1">应用1</a>
<a href="#/app2">应用2</a>
<a onclick="a();">应用3</a>
<script src="/lib/umd/single-spa.js"></script>
<script>
  function a(){
    history.pushState({}, '', '/app3');
  }
  function b(){
    history.pushState({}, '', '/app4');
  }

  // 参数
  // 1) 注册应用的名字
  // 2) 记载app的方法必须是返回一个promise方法
  singleSpa.registerApplication(
    'app1'
    , async (props) => {
      console.log('预加载 app1 --- --- ---');
      return {
        bootstrap: /*async (props) => {
          console.log('bootstrap');
        }*/[async()=>{console.log('app1 bootstrap1');},async()=>{console.log('app1 bootstrap2');}],
        mount: async (props) => {
          console.log('app1 mount');
        },
        unmount: async (props) => {
          console.log('app1 unmount');
        }
      }
    }
    , location => location.hash.startsWith('#/app1')
    , {store:{name:'ahhh', age: 123}}
  ); //加载应用

  singleSpa.registerApplication(
    'app2'
    , async (props) => {
      console.log('预加载 app2 --- --- ---');
      return {
        bootstrap: async (props) => {
          console.log('app2 bootstrap');
        },
        mount: async (props) => {
          console.log('app2 mount');
        },
        unmount: async (props) => {
          console.log('app2 unmount');
        }
      }
    }
    , location => location.hash.startsWith('#/app2')
    , {store:{name:'ahhh2', age: 234}}
  );

  singleSpa.registerApplication(
    'app3'
    , async (props) => {
      console.log('预加载 app3 --- --- ---');
      return {
        bootstrap: async (props) => {
          console.log('app3 bootstrap');
        },
        mount: async (props) => {
          console.log('app3 mount');
        },
        unmount: async (props) => {
          console.log('app3 unmount');
        }
      }
    }
    , location => location.pathname.startsWith('/app3')
  );


  singleSpa.start(); //真正挂载应用
</script>
</body>
</html>
